<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1>  反射xss</h1>
  <textarea name="txt" id="txt" cols="80" rows="10"></textarea>
  <button type="button" id="test">保存信息</button>

  <h1>  Dom xss</h1>
  <div id="dom" name="dom"></div>

  <h1>  sql注入</h1>
  <input id="input2"/>
  <input id="input3"/>
  <button onclick="sql_func()">登录</button>

  <h1>  存储型xss</h1>
  <p>留言: <input type="text" name="xss1" id="input4"/></p>

  <button onclick="register()">保存留言</button>
  <button onclick="checkRegister()">查看留言</button>
  <div id='ly'></div>
</body>
</html>
<style type="text/css">
</style>

 <script>

  var test = document.querySelector('#test')

  test.addEventListener('click', function () {
    var url = `/test?test=${txt.value}`
    var xhr = new XMLHttpRequest()
    xhr.open('POST', url, true)
    xhr.send(null)
  }, false)

  </script>
  <!-- <script>alert(document.cookie)</script> -->
  <!-- <img src="1"   onmousemove='alert(document.cookie)' /> -->


  <!-- //DOM xss操作 -->
  <script>
    var s = location.search;            // 返回URL中的查询部分（？之后的内容）
    var url = "";                       
    if (s.indexOf("name=") > -1) {       
      url = s.split('name=')[1]         // 过滤掉"name="字符 得到地址栏里的name参数
    }
    console.log(url) //javascript:alert('123');
    document.getElementById("dom").innerHTML='<a href="' + url + '">"' + url + '"</a>'; //打印用户名张三并做跳转处理
  </script>


 <script>
  function sql_func(){
    var username=document.getElementById('input2').value;
    var password=document.getElementById('input3').value;
    fetch('/login',{
        headers:{
            "content-Type": "application/json"
        },
        method:"POST",
        body:JSON.stringify({username,password}),
    }).then(res=>res.text()).then(data=>{
        alert(data)
    })
}


function register(){
    let xss1=document.getElementById('input4').value;
    fetch('/save',{
        headers:{
            "content-Type": "application/json"
        },
        method:"POST",
        body:JSON.stringify({xss1}),
    }).then(res => res.json()).then(res => {
      alert('留言成功')
    })
}
function checkRegister(){
  fetch('/check',{
        headers:{
            "content-Type": "application/json"
        },
        method:"get",
    }).then(res => res.json()).then(res => {
      let txt = '<a>留言内容</a><br>';
      for (i = 0; i < res.length ;i++) {
          txt += '<a>"' + res[i].name + '"</a>'+ "<br>";
      }
      document.write(txt);
    })
}
 </script>